// component/anShare/anShare.js
import Toast from '@vant/weapp/toast/toast';
import Ajax from "../../utils/ajax"
import Api from "../../utils/api"
import Util from "../../utils/util"
import Config from '../../utils/config.js';
// 解决 async / await 报错
import regeneratorRuntime from '../../utils/runtime.js'
const app = getApp()

Component({
  options: {
    styleIsolation: 'shared',
  },
  /**
   * 组件的属性列表
   */
  properties: {
    show:{
      type: Boolean,
      value: false
    },
    targetItem:{ // 当前打卡记录的参数
      type: Object,
      value:{}
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    canvasLoading: true,
    imgPath:'', // 生成的分享图片 临时路径
  },

  // 监听器
  observers: {
    'show': function(val){
      if(val){
        this.picture()
      }
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {

    // 保存图片到系统相册
    savePicture: function(){	
      let _this = this
      wx.saveImageToPhotosAlbum({
        filePath: _this.data.imgPath,
        success: function () {
          Toast.success('保存成功')
          _this.onClose()
        },
        fail: function(err){
          if(err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
　　　　　　　　　　wx.showModal({
　　　　　　　　　　　　title: '提示',
　　　　　　　　　　　　content: '需要您授权保存相册',
　　　　　　　　　　　　showCancel: false,
　　　　　　　　　　　　success: modalSuccess => {
　　　　　　　　　　　　　　wx.openSetting({
　　　　　　　　　　　　　　　　success(settingdata) {
　　　　　　　　　　　　　　　　　　if (settingdata.authSetting['scope.writePhotosAlbum']) {
　　　　　　　　　　　　　　　　　　　　console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
　　　　　　　　　　　　　　　　　　}else {
　　　　　　　　　　　　　　　　　　　　console.log('获取权限失败，给出不给权限就无法正常使用的提示')
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　})
　　　　　　　　　　　　}
　　　　　　　　　　})
　　　　　　　　}　　　　　　
          console.log("保存失败",err)
        }
      });
    },

    //生成图片 绘制画布
    picture: async function () { 
      let item = this.data.targetItem
      let signTime = item.time.substring(0,11)
      let userInfo = app.globalData.userInfo
      let avatarUrl = userInfo.avatarUrl // 用户头像
      let address = item.address
       const ctx = wx.createCanvasContext('shareCanvas',this); // 在自定义组件中 需要加 this
       ctx.setFillStyle('#FFFFFF')
       ctx.fillRect(150, 11, 140, 170) // 填充背景色
       await this.getWeChat().then(res=>{ // 获取小程序码图片
        if(res){
          ctx.drawImage(res, 230, 120, 50, 50);  //添加二维码图片
        }
       }).catch(e=>{console.log(e)})
      
       // 如果能够获取到用户头像
       if(avatarUrl){
        await Util.getImg(avatarUrl).then(val=>{ // 下载用户头像
            ctx.drawImage(val, 165, 20, 50, 50)	// 绘制用户头像
        }).catch(e=>{console.log(e)})
       }
      
       
        //ctx.setTextAlign('center')  // 文字居中
       ctx.setFillStyle('#000000')
       ctx.setFontSize(10)     
       ctx.fillText(userInfo.nickName, 165, 85, 115) 
       ctx.stroke();
       
       ctx.setFillStyle('#333333') // 文字颜色：黑色
       ctx.setFontSize(9)     // 文字字号：22px
       ctx.fillText(address, 165, 115, 115) //开始绘制文本的 x/y 坐标位置（相对于画布） 最后一个参数最大宽度
       ctx.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
       
       ctx.setFillStyle('#333333')
       ctx.setFontSize(9)     
       ctx.fillText(signTime, 165, 100) 
       ctx.stroke();
       
       ctx.setFillStyle('#333333')
       ctx.setFontSize(9)     
       ctx.fillText('扫码查看定位', 165, 150) 
       ctx.stroke();
       
       ctx.setFillStyle('#333333')
       ctx.setFontSize(7)     
       ctx.fillText('经度：'+item.longitude, 165, 160, 66) 
       ctx.stroke();
       
       ctx.setFillStyle('#333333')
       ctx.setFontSize(7)     
       ctx.fillText('维度：'+item.latitude, 165, 170, 66) 
       ctx.stroke();
       
       await this.getAddressMapBg().then(res=>{	// 获取分享的 背景图
           ctx.drawImage(res, 0, 0, 300, 190);  //绘制 背景图
       }).catch(e=>{console.log(e)})

       this.setData({
        canvasLoading: false
       })
       ctx.draw(false, this.drawPicture());//draw()的回调函数 
       
    },

    // 获取小程序码
    getWeChat: function(){	
      return new Promise((resolve, reject) => { 
        let nd = {
          scene: this.data.targetItem.id,
          page: 'pages/shareLocation/shareLocation',
          width: 280
        }
        Ajax.get(Api.wx.getCode,nd).then(res=>{
          Util.base64src(res,this.data.targetItem.id, file=>{
            resolve(file)
          })
        }).catch(error => {	// 接口报错拦截
           resolve(error)
        })
      })
    },

    // 获取分享的 背景图
    getAddressMapBg: function(){
      return new Promise((resolve, reject) => {
        wx.getImageInfo({
          src: Config.picUrl +'share_bg.png', //share_bg.png map_address.png
          success(res) {
            resolve(res.path)
          },
          fail:function(e){
            reject(e)
          }
        })
      })
    },

    //生成图片 输出
    drawPicture() { 
        setTimeout(()=>{
          wx.canvasToTempFilePath({ //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
          x: 0,
          y: 0,
          width: 300,
          height: 190,
          destWidth: 900, //输出的图片的宽度（写成width的两倍，生成的图片则更清晰）
          destHeight: 570,
          canvasId: 'shareCanvas',
          success: (res)=> {
            this.setData({
              imgPath: res.tempFilePath
            })
          },
          fail:function(e){
            console.log('生成失败：',e)
          }
          },this)
        },300)
    },

    // 关闭
    onClose() {
      this.setData({
        show: false
      })
    },
  }
})
